import React from 'react'
import { Button, Spin, Alert, } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import fetchJSONP from 'fetch-jsonp'
export default class MovieList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            info: {},
            isLoading: true
        }
    }
    componentWillMount() {
        fetchJSONP('https://douban.uieee.com/v2/movie/subject/' + this.props.match.params.id).then(response => {
            return response.json()
        }).then(data => {
            this.setState({
                info: data,
                isLoading: false
            })
            console.log(this.state.info)
        })
    }
    render() {
        return <div>
            <Button type="primary" icon={<LeftOutlined />} size="middle" onClick={this.goBack}>
                返回电影列表页面
            </Button>
            {this.renderInfo()}

        </div>
    }
    goBack = () => {
        this.props.history.go(-1)
    }
    renderInfo = () => {
        if (this.state.isLoading) {
            return <Spin tip="Loading...">
                <Alert
                    message="加载中，请稍后"
                    description="精彩内容即将呈现..."
                    type="info"
                />
            </Spin>
        } else {
            return <div>
                <div style={{textAlign:'center'}}>

                    <h1 style={{fontSize:'20px',fontWeight:'bold'}}>{this.state.info.title}</h1>
                    <img src={this.state.info.images.large.replace('img3','img1')}></img>
                </div>
                <p style={{textIndent:'2em',lineHeight:'30px'}}>{this.state.info.summary}</p>
            </div>
        }
    }
}